<template>
  <div class="comp-device-monitor-box">
    <CompBox style="height: 500px;width: 800px">
      <div class="map-monitor-exit" @click="$emit('close')">
        <img src="@/assets/cloudV2/img/pop-exit.png" style="width: 100%;height: 100%;"/>
      </div>
      <div style="width: 100%;height: 100%;padding: 30px">
        <iframe
            v-if="playUrl !== ''"
            :src="playUrl"
            width="100%"
            height="100%"
            style="border: none"
            id="ysOpenDevice"
            allowfullscreen
        >
        </iframe>
        <h1 v-else>该设备没有安装监控</h1>
      </div>
    </CompBox>
  </div>
</template>

<script setup>

import CompBox from "./CompBox.vue";
import {onMounted, ref} from "vue";
import {getMonitorUrl} from "../../../api/business/screen";

const props = defineProps({
  devId: String
})
const playUrl = ref('')
onMounted(()=>{
  console.log(props.devId)
  getMonitorUrl(props.devId).then(response =>{
    console.log("response=>{}"+response)
    if (response.code != 200){
      return
    }
    playUrl.value = response.msg;
  })
})
</script>

<style scoped>
.comp-device-monitor-box {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999999;
}
.map-monitor-exit{
  position: absolute;
  cursor: pointer;
  width: 24px;
  height: 24px;
  top: 10px;
  right: 10px;
  z-index: 999999999;
}
</style>